<template>
  <div id="setting"
       style="height: 100%;width: 100%;background-color: #f7f7f7;position: absolute;;border-top-left-radius: 8px;">
    <div style="position: relative;width: 100%;height: 100%;;padding: 10px 0 0 10px;">
      <div style="background-color: #ffffff;height: 100%;">
        <div style="position: relative;width: 100%;height: calc(100% - 40px);top: 40px;left: 0;padding-top: 0px;overflow-y: scroll;">
        <router-view></router-view>
        </div>
        <div style="position: absolute;width: 100%;left: 0;top: 10px;padding-left: 10px;">
          <ul style="width: 100%;">

            <router-link to='/chat/settings/basic'>
              <li :class="$route.name == 'basic'?'active':''" ><a href="javascript:void(0);">基础设置</a></li>
            </router-link>
            <router-link to='/chat/settings/advance'>
              <li :class="$route.name == 'advance'?'active':''" v-if="user.role=='ADMIN'"><a href="javascript:void(0);">高级设置</a></li>
            </router-link>
            <router-link to='/chat/settings/msgtype'>
              <li :class="$route.name == 'msgtype'?'active':''"  v-if="user.role=='ADMIN'"><a href="javascript:void(0);">消息类型</a></li>
            </router-link>
            <router-link to='/chat/settings/structure'>
              <li :class="$route.name == 'structure'?'active':''" v-if="user.role=='ADMIN'"><a href="javascript:void(0);">组织架构</a></li>
            </router-link>
            <li @click="showSetting"><a href="javascript:void(0);">访客端</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    name: 'setting',
    data () {
      return {
      }
    },directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    },
    props: ["user"],
    methods: {
      showSetting: function () {
        var that = this;
        dialog('<div style="width: 300px;padding: 10px;border-radius: 8px;background-color: whitesmoke;color: #666;"><div style="display: flex;"><div style="width: 100px;white-space: nowrap;color: #333;font-weight: bold;">客户端地址</div><div style="word-break: break-all;padding-left: 10px;"><a style="color: #009688;" href="//'+window.location.host+'/client/login?appId=' + that.user.appId + '">//'+window.location.host+'/client/login?appId=' + that.user.appId + '</a></div></div><a href="javascript:void(0);" click-bind="cancel">[关闭]</a></div>', {
          cancel: function (evt) {
            evt.data.remove();
          },
          confirm: function (evt) {
          }
        });
      },
    },
    mounted(){
    },
  }
</script>

<style scoped>
</style>
